// ==================== SCSS Mixin 工具集 ====================
// 此文件包含 Button 组件使用的核心样式混合宏
// 提供可重用的样式逻辑，确保代码的一致性和可维护性

// button-size Mixin - 统一设置按钮尺寸相关属性
// 参数说明：
//   $padding-y: 垂直方向内边距（通常使用 rem 单位）
//   $padding-x: 水平方向内边距（通常使用 rem 单位）
//   $font-size: 字体大小（通常使用 rem 单位）
//   $border-radius: 边框圆角半径（通常使用 rem 单位）
@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
  padding: $padding-y $padding-x; // 设置按钮内边距，控制按钮的尺寸
  font-size: $font-size; // 设置按钮文字大小
  border-radius: $border-radius; // 设置按钮边框圆角
}

// button-style Mixin - 统一设置按钮颜色和状态样式
// 参数说明：
//   $background: 默认背景颜色
//   $border: 默认边框颜色
//   $color: 默认文字颜色
//   $hover-background: 悬停状态背景颜色（可选，默认使用 lighten 函数提亮 7.5%）
//   $hover-border: 悬停状态边框颜色（可选，默认使用 lighten 函数提亮 10%）
//   $hover-color: 悬停状态文字颜色（可选，默认保持原文字颜色）
@mixin button-style(
  $background,
  $border,
  $color,
  $hover-background: lighten($background, 7.5%),
  $hover-border: lighten($border, 10%),
  $hover-color: $color
) {
  // 默认状态样式
  color: $color; // 设置文字颜色
  background: $background; // 设置背景颜色
  border-color: $border; // 设置边框颜色

  // 悬停状态（:hover） - 鼠标悬停时的样式变化
  &:hover {
    color: $hover-color; // 悬停时文字颜色
    background: $hover-background; // 悬停时背景颜色（通常比默认状态更亮）
    border-color: $hover-border; // 悬停时边框颜色（通常比默认状态更亮）
  }

  // 聚焦状态（:focus, .focus） - 键盘导航或点击后的焦点状态
  &:focus,
  &.focus {
    color: $hover-color; // 聚焦时文字颜色（与悬停状态一致）
    background: $hover-background; // 聚焦时背景颜色（与悬停状态一致）
    border-color: $hover-border; // 聚焦时边框颜色（与悬停状态一致）
  }

  // 禁用状态（:disabled, .disabled） - 按钮被禁用时的样式
  &:disabled,
  &.disabled {
    color: $color; // 禁用时保持原文字颜色（但通常通过透明度表示禁用）
    background: $background; // 禁用时保持原背景颜色
    border-color: $border; // 禁用时保持原边框颜色
  }
}
